import React, { useState } from "react";
import { useTranslation } from "react-i18next";

import img1 from "../../assets/images/home/img1.png";
import img2 from "../../assets/images/home/img2.png";
import img3 from "../../assets/images/home/img3.png";
import img4 from "../../assets/images/home/img4.png";
import img5 from "../../assets/images/home/img5.png";
import RightArrowIcon from "../../assets/images/home/right_arrow.svg";
import {useHistory} from 'react-router-dom'

function HomeIndex() {
  const history = useHistory();

  const { t, i18n } = useTranslation();

  const [totalData, setTotalData] = useState("5,734.1793");
  const [transTotalData, setTransTotalData] = useState("49,534,853.1945");

  const handleGoTrading = () => {
    history.push('/dapp/deal')
  }

 
  

  return (
    <div className="app-container home-page">
      <div className="banner-bk">
        <div className="banner-block">
          <div className="title-box">
            <div className="title-text">{t("home.blockOneTitle")}</div>
            <div className="sub-title-text">{t("home.blockOneSubTitle")}</div>
            <div className="launch-btn">{t("home.launch")}</div>
          </div>
        </div>
      </div>
      <div className="block-two-bk">
        <div className="block-two">
          <div className="title-box">
            <div className="title-text">{t("home.blockTwoTitle")}</div>
            <div className="sub-title-text">{t("home.blockTwoSubTitle")}</div>
          </div>
          <img src={img1} className="img-item" />

          <div className="data-box">
            <div className="data-title">{t("home.blockTwoNumTitle")}</div>
            <div className="data-num">{totalData}</div>
            <div className="data-num-small">≈ {transTotalData}</div>
          </div>
        </div>
      </div>

      <div className="block-three-bk">
        <div className="block-three">
          <img src={img2} className="block-img" />

          <div className="market-box"></div>
        </div>
      </div>
      <div className="introduce-box-bk">
      <div className="introduce-box">
        <img src={img3} className="introduce-img" />
        <div className="title">{t("home.introduceTitle")}</div>
        <div className="sub-title">{t("home.introduceSubTitle1")}</div>
        <p className="desc">{t("home.introduceDesc1")}</p>
        <div className="sub-title">{t("home.introduceSubTitle2")}</div>
        <p className="desc">{t("home.introduceDesc2")}</p>
        <div className="learn-btn">{t("home.learnMore")}</div>
      </div>

      </div>
      <div className="bottom-box">
        <img src={img4} className="bottom-img" />
        <img src={img5} className="name-img" />
        <div className="title">{t("home.bottomTitle")}</div>
        <div className="sub-title">{t("home.bottomSubTitle")}</div>
        <div className="bottom-btn" onClick={() => handleGoTrading()}><span>{t("home.bottomBtn")} </span><img className="right-icon" src={RightArrowIcon}></img></div>
      </div> 
    </div>
  );
}

export default HomeIndex;
